<template>
  <Card>
    <span slot="title">部署单位管理员账号</span>
    <div slot="content">
      <div class="table">
        <el-dialog
          title="下级单位管理员账号"
          :visible.sync="dialogVisible"
          width="40%"
        >
          <el-form
            ref="form"
            :model="form"
            label-width="100px"
            status-icon
            size="medium"
          >
            <el-form-item label="姓名：">
              <el-input v-model="form.name"></el-input>
            </el-form-item>
            <el-form-item label=" 登录账号：">
              <el-input v-model="form.account"></el-input>
            </el-form-item>
            <el-form-item label="登录密码：">
              <el-input
                v-model="form.password"
                type="password"
                placeholder="
                            密码长度8-16位，由数字/大小写字母/特殊字符组成"
              ></el-input>
            </el-form-item>
            <el-form-item label="工作单位：">
              <el-input v-model="form.company"></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <we-button @click="cancel" size="small">取 消</we-button>
            <we-button @click="addInfo" size="small">确 定</we-button>
          </span>
        </el-dialog>
        <div class="table_content">
          <div class="table_content_head">
            <el-form :inline="true" :model="formInline" size="medium">
              <el-form-item>
                <el-input
                  v-model="formInline.user"
                  placeholder="请输入名字"
                ></el-input>
              </el-form-item>
              <el-form-item label="工作单位">
                <el-select v-model="formInline.region" placeholder="单位名称">
                  <el-option
                    label="深圳木卫二科技有限公司"
                    value="shanghai"
                  ></el-option>
                  <el-option
                    label="木卫二科技有限公司"
                    value="beijing"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <we-button @click="onSubmit" type="primary" size="small"
                  ><i class="el-icon-search"></i> 查询</we-button
                >
                <we-button plain @click="reset" size="small"
                  ><i class="el-icon-refresh"></i> 重置</we-button
                >
              </el-form-item>
              <el-form-item style="float: right">
                <we-button
                  @click="dialogVisible = true"
                  type="primary"
                  size="small"
                  ><i class="el-icon-plus"></i> 添加
                </we-button>
              </el-form-item>
            </el-form>
            <div class="form">
              <el-table
                size="mini"
                :data="tableData"
                style="width: 100%"
                stripe
                select-on-indeterminate
                :header-cell-style="headerStyle"
              >
                <el-table-column type="selection" width="55"> </el-table-column>
                <el-table-column label="姓名" width="180">
                  <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="账号" width="180">
                  <template slot-scope="scope">
                    <span>{{ scope.row.account }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="工作单位" width="180">
                  <template slot-scope="scope">
                    <span>{{ scope.row.company }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="创建时间" width="180">
                  <template slot-scope="scope">
                    <span>{{ scope.row.time }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="状态" width="120">
                  <template slot-scope="scope">
                    <span>{{ scope.row.state }}</span>
                  </template>
                </el-table-column>
                <el-table-column label="操作">
                  <template slot-scope="scope">
                    <div v-if="scope.row.state == '禁用'">
                      <we-button size="mini" type="primary"
                        ><i class="el-icon-caret-right"></i> 详情</we-button
                      >
                      <we-button size="mini" type="success"
                        ><i class="el-icon-video-play"></i> 启用
                      </we-button>
                    </div>
                    <div v-else>
                      <we-button size="mini" type="primary"
                        ><i class="el-icon-caret-right"></i> 详情</we-button
                      >
                      <we-button size="mini" type="danger"
                        ><i class="el-icon-remove"></i> 禁用
                      </we-button>
                    </div>
                  </template>
                </el-table-column>
              </el-table>
              <div class="table_tools">
                <!-- <we-button size="small" @click="toggleSelection"
                >取消全选</we-button
              > -->
                <we-pagination :total="pagination.total"></we-pagination>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script>
import Card from '@/components/Card'
import WeButton from '@/components/WeButton'
import WePagination from '@/components/WePagination'
export default {
  components: {
    Card,
    WeButton,
    WePagination
  },
  data () {
    return {
      form: {
        name: '',
        account: '',
        password: '',
        company: ''
      },
      formInline: {
        user: '',
        region: ''
      },
      // 分页数据
      pagination: {
        total: 30
      },
      tableData: [
        {
          name: '张小刚',
          account: '13812345678',
          company: '河南黄河河务局',
          time: '2020-11-25',
          state: '禁用'
        },
        {
          name: '张小刚',
          account: '123123456789',
          company: '河南黄河河务局',
          time: '2020-11-25',
          state: '正常'
        }
      ],
      dialogVisible: false
    }
  },
  methods: {
    // 表头样式回调
    headerStyle () {
      return 'backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700'
    },
    // 查询
    onSubmit () {
      console.log('submit!')
    },
    // 重置
    reset () {
      this.formInline.user = ''
      this.formInline.region = ''
    },
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then((_) => {
          done()
        })
        .catch((_) => {})
    },

    // 取消
    cancel () {
      this.form.name = ''
      this.form.account = ''
      this.form.password = ''
      this.form.company = ''
      this.dialogVisible = false
    },
    addInfo () {
      if (this.form.name.trim()) {
        const name = this.form.name
        const account = this.form.account
        const password = this.form.password
        const company = this.form.company
        this.tableData.push({ name, account, password, company })
        this.form.name = ''
        this.form.account = ''
        this.form.password = ''
        this.form.company = ''
        this.dialogVisible = false
      }
    }
  }
}
</script>

<style lang="less" scoped>
.table {
  border-radius: 5px;
  margin: 20px 12px;
  position: relative;
  .table_content {
    background-color: #fff;
    padding: 0 24px;
  }
  .table_content_head {
    margin-top: 45px;
  }
  .form {
    margin-bottom: 50px;
    .table_tools {
      margin-top: 20px;
      display: flex;
      justify-content: flex-end;
    }
  }
}
</style>
